<template>
  <div id="import">
    <el-row>
      <el-col :style="mystyle">
        <el-form>
        <h1>人事制度维护</h1>
          <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" :on-success="getImportList" name="file" :file-list="fileList"
              :action="this.$http.defaults.baseURL + 'admin/ps/upload'" with-credentials accept="application/x-zip-compressed" :on-error='uploaderror'>
            <el-button type="primary" icon="el-icon-document">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
          </el-upload>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      mystyle: 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + 500 + 'px'
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isZIP = file.name.indexOf('.zip') > 0
      // const isLt5M = file.size / 1024 / 1024 < 500
      if (!isZIP) {
        this.$message.error('上传文件只能是 ZIP 格式!')
      }
      // if (!isLt5M) {
      //   this.$message.error('上传文件大小不能超过 500MB!')
      // }
      // return isZIP && isLt5M
      return isZIP
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，如有多个文件请压缩为zip文件打包上传。`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getImportList()
    },
    importPersons () {
      this.getImportList()
    },
    // 获取用户列表
    getImportList (res) {
      if (res.success) {
        this.$message({
          message: '导入成功！' + res.message,
          type: 'success'
        })
      } else {
        console.log(res.Msg)
        this.$message({
          message: '导入失败:' + res.message,
          type: 'error'
        })
      }
      this.fileList = []
    },
    mainheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.mystyle = 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + (clientHeight - 150) + 'px'
    },
    uploaderror (err) {
      console.log('具体错误')
      console.log(err)
      this.$message({
        message: '导入失败，可能是文件大小超出系统限制:' + err,
        type: 'error'
      })
    }
  },
  mounted () {
    this.mainheight(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.mainheight(_this)
    }
  }
}
</script>
<style scope>
#import .el-upload-list__item{
  width: 250px;
}
#import a{
  width: 200px;
}
</style>
